<template>
	<view class="page" :style="{minHeight:$height()}">
		<view class="item" v-for="(item,index) in list" :key="index">
			<view class="topBox">
				<view class="king-flex king-flex__column">
					<view class="txt">
						{{item.name}}
					</view>
					<view class="tateTxt">
						至少已签约{{item.ask}}万电量
					</view>
				</view>
				<view class="king-flex king-flex__column">
					<!-- <view class="look" @click="lookRemark(item.remark)">
						协议说明
					</view> -->
					<view class="look" v-if="getRoleStatus(item.tag) === 0" @click="goUrl(item.tag)"
						style="margin-top:10rpx;">
						提交申请
					</view>
					<view class="dowload" v-if="getRoleStatus(item.tag) === 1"
						@click="$next(`/pages/contract/signLabour?tag=${item.tag}`)" style="margin-top:10rpx;">
						签署协议
					</view>

				</view>
			</view>

		</view>
		<image v-if="list.length == 0" src="@/static/image/empty.png" mode="widthFix" class="is-empty"></image>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [],
				roles: []
			}
		},
		onShow() {
			this.$axios.request(this.$api.getUser, "GET").then((val) => {
				this.roles = JSON.parse(val.data.roles)
				this.contractList()
			})

		},
		methods: {
			getRoleStatus(tag) {
				let status = ""
				this.roles.forEach((item) => {
					
					if (tag == item.tag && item.status == 1) {
						status = 1
					}
					if (tag == item.tag && item.status == 0) {
						status = 0
					}
				})

				return status
			},
			contractList() {
				this.$axios.request(this.$api.getSignContractTemplateRes, "GET", {
					type: 1
				}).then((val) => {
					this.list = val.data.list
				})
			},
			goUrl(tag) {
				if (tag == 'ELECTRICIAN') {
					this.$next(`/pages/mine/TownMayor`)
				}
				if (tag == 'AREA') {
					this.$next(`/pages/mine/districtCountyApply`)
				}
				
				if (tag == 'PARTNER' || tag == 'COMPANY_PARTNER') {
					this.$next(`/pages/mine/partner`)
				}
			},
			lookRemark(remark) {
				uni.showModal({
					title: "友情提示",
					showCancel: false, // 是否显示取消按钮，默认为 true  
					content: remark
				})
			},
			openFile(url) {
				this.$utils.downLoad(this.$axios.interfaceUrl() + url)
			}
		}
	}
</script>

<style>
	.page {
		width: 100%;
		height: 100%;
		background-color: #F0F2F5;
		overflow-y: hidden;
	}

	.item {
		display: flex;
		justify-content: space-between;
		flex-direction: column;
		width: 100%;
		/* height: 148rpx; */
		background-color: #FFFFFF;
		padding: 16rpx 35rpx;
		margin-top: 16rpx;
	}

	.topBox,
	.buttomBox {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
	}

	.txt {
		height: 50rpx;
		font-size: 36rpx;
		width: 520rpx;
		font-family: "PingFang SC";
		font-weight: 600;
		line-height: 50rpx;
		color: #333333;
		opacity: 1;
	}

	.look {
		height: 40rpx;
		background-color: #2979ff;
		opacity: 1;
		border-radius: 4rpx;
		font-size: 24rpx;
		font-family: "PingFang SC";
		font-weight: 300;
		line-height: 40rpx;
		padding: 0 26rpx;
		color: #FFFFFF;
		opacity: 1;
	}

	.dowload {
		height: 40rpx;
		border-radius: 4rpx;
		font-size: 24rpx;
		font-family: "PingFang SC";
		font-weight: 300;
		line-height: 40rpx;
		padding: 0 26rpx;
		color: #2E6ADF;
		opacity: 1;
		background-color: #FFFFFF;
		border: 1rpx solid #2E6ADF;
		border-radius: 4rpx;
	}

	.tateBox {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		height: 100%;
		font-size: 36rpx;
		font-family: "PingFang SC";
		font-weight: 300;
		color: #222222;
		opacity: 1;
	}

	.more {
		font-size: 24rpx;
		font-family: "PingFang SC";
		text-align: center;
		font-weight: 300;
		color: #BBBBBB;
		opacity: 1;
		margin: 24rpx auto 116rpx;
	}
</style>